<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任务一：零基础HTML编码</title>
</head>

<body>
<h1>前端</h1>
<ul>
	<li><a href="#" >导航链接1</a></li>
    <li><a href="#" >导航链接2</a></li>
    <li><a href="#" >导航链接3</a></li>
    <li><a href="#" >导航链接4</a></li>
</ul>
<h2>网站前端</h2>
<h3>基础</h3>
<p>百度百科&nbsp;2013-03-23</p>
<p>前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。<a href="http://baike.baidu.com/">http://baike.baidu.com/</a><br />因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，<br />现在最新的高级版本HTML5HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。</p>
<img src="1.jpeg" alt="" />
<p>前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。<br />虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。层和结构层。<a href="http://baike.baidu.com/" target="_blank">http://baike.baidu.com/</a>在进行开发前，需要对这些概念弄清楚弄明白，这样在开发的<br />过程中才会得心应手。html、CSS3，以及SVG等。</p>
<h2>语言分类</h2>
<h3>Html</h3>
<p>百度百科&nbsp;2013-03-23</p>
<p>指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和<br />规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。<br />XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。和结构层。<a href="http://baike.baidu.com/" target="_blank">百度百科</a>所<br />有新的浏览器都支持 XHTML。</p>
<img src="1.jpeg" alt="" />
<ul>
    <li>Html</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>
<h2>图片</h2>
<ul type="none">
    <li><p>好看的图片</p><img src="1.jpeg" alt="" /></li>
    <li><p>好看的图片</p><img src="1.jpeg" alt="" /></li>
    <li><p>好看的图片</p><img src="1.jpeg" alt="" /></li>
    <li><p>好看的图片</p><img src="1.jpeg" alt="" /></li>
    <li><p>好看的图片</p><img src="1.jpeg" alt="" /></li>
</ul>
<h2>表格样式</h2>
<h3>表格</h3>
<p>百度百科&nbsp;2013-03-23</p>
<ol>
    <li>排名1</li>
    <li>排名2</li>
    <li>排名3</li>
</ol>
<span>这是一个表格：</span>
<table border="1">
<thead>
<tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
</tr>
</thead>
<tbody>
    <tr><td>内容11</td><td>内容12</td><td><a href="#">操作1</a></td></tr>
    <tr><td>内容21</td><td>内容22</td><td><a href="#">操作2</a></td></tr>
    <tr><td>内容31</td><td>内容32</td><td><a href="#">操作3</a></td></tr>
    <tr><td>内容41</td><td>内容42</td><td><a href="#">操作4</a></td></tr>
    <tr><td>合计</td><td colspan=2>10000</td></tr>
</tbody>
</table>
<h2>侧边栏</h2>
<h3>注册窗口</h3>
<form>
<label for="email">请输入邮箱地址：</label>
<input type="text" id="email" name="emai" placeholder="这是一个文本输入框"/>
<p>邮箱地址请按要求格式输入</p>
<label for="password1">请输入密码：</label>
<input type="text" id="password1" name="password11" placeholder="这是一个文本输入框"/>
<label for="password2">请重复输入密码：</label>
<input type="text" id="password2" name="password22" placeholder="这是一个文本输入框"/>
<p>密码请为6-16位英文数字</p><br />
<label>性别：</label>
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<label>城市：</label>
<select>
  <option value ="beijing">北京</option>
  <option value ="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>
<label>爱好：</label>
<input type="checkbox" name="game"/>运动
<input type="checkbox" name="art"/>艺术
<input type="checkbox" name="science"/>科学
<label for="profile">个人描述：</label>
<textarea id="profile">这是一个多行文本框，输入您的个人描述</textarea>
<input type="button" id="send" value="确认提交"/>
</form>
<p>版权所有©</p>
</body>
</html>
